<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卖车</title>
		<script type="text/javascript" src="../js/xadmin.js"></script>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
		<link rel="stylesheet" href="../lib/layui/css/layui.css">
		<link rel="stylesheet" href="../css/font.css">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
		<script src="../js/script.js"></script>
		<!-- favicon
		============================================ -->
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">

		<!-- Google Fonts
		============================================ -->
		<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,900,700,700italic,300' rel='stylesheet' type='text/css'>

		<!-- Bootstrap CSS
		============================================ -->
		<link rel="stylesheet" href="./css/bootstrap.min.css">

		<!-- nivo slider CSS
		============================================ -->
		<link rel="stylesheet" href="lib/nivo-slider/css/nivo-slider.css" type="text/css" />
		<link rel="stylesheet" href="lib/nivo-slider/css/preview.css" type="text/css" media="screen" />

		<!-- Fontawsome CSS
		============================================ -->
		<link rel="stylesheet" href="css/font-awesome.min.css">

		<!-- owl.carousel CSS
		============================================ -->
		<link rel="stylesheet" href="css/owl.carousel.css">

		<!-- jquery-ui CSS
		============================================ -->
		<link rel="stylesheet" href="css/jquery-ui.css">

		<!-- meanmenu CSS
		============================================ -->
		<link rel="stylesheet" href="css/meanmenu.min.css">

		<!-- animate CSS
		============================================ -->
		<link rel="stylesheet" href="css/animate.css">

		<!-- style CSS
		============================================ -->
		<link rel="stylesheet" href="style.css">

		<!-- responsive CSS
		============================================ -->
		<link rel="stylesheet" href="css/responsive.css">

		<!-- modernizr JS
		============================================ -->
		<script src="js/vendor/modernizr-2.8.3.min.js"></script>
		

	</head>
	<body style="background-color: #FAFAFA;">
		<!--Mainmenu Start-->
		<div class="mainmenu-area hidden-sm hidden-xs">
			<div id="sticker">
				<div class="container">
					<div class="row">
						<div class="col-lg-12 col-md-12 hidden-sm">
							<div class="mainmenu" style="color: #007DDB;">
								<nav>
									<ul id="nav" >
										<li><a style="font-size: 20px;color: #009688;" href="home.html">二手车交易平台</a></li>
										<li style="margin-left: 120px;"></li>
										<li class="current"><a class="lfont" href="home.html">买车</a></li>
										<li><a href="sell.html" style="color: red;">卖车</a></li>
										<li><a href="buy.html">求购</a></li>
										<li><a href="user.html">个人中心</a></li>
										<li><a id="logOut">安全退出</a></li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--End of Mainmenu-->
		<br />
		<div class="line" style="color: #0097BD;">卖车前先估价，心里更有底！</div>
		<br />
		<hr />
		<div style="text-align: center; border-style: solid;margin:15px 400px;padding: 15px 0px;border-style: solid;border-radius: 20px;">
			<form class="layui-form" id="calForm">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">品牌:</label>
						<div class="layui-input-inline">
							<select name="brand" id="brand">
								<option value="">选择汽车品牌</option>
								<option value="6">大众</option>
								<option value="8">奔驰</option>
								<option value="8">宝马</option>
								<option value="6">别克</option>
								<option value="8">红旗</option>
								<option value="3">五菱</option>
								<option value="6">特斯拉</option>
							</select>
						</div>
						<label class="layui-form-label" style="width: 100px;">汽车类型:</label>
						<div class="layui-input-inline">
							<select name="type" id="type">
								<option value="">选择汽车类型</option>
								<option value="3">轿车</option>
								<option value="12">跑车</option>
								<option value="8">商务车</option>
								<option value="8">越野车</option>
								<option value="3">电动车</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label for="usedTime" class="layui-form-label">
							车龄
						</label>
						<div class="layui-input-inline">
							<select name="usedTime" id="usedTime">
								<option value="">选择车龄</option>
								<option value="3">3年以内</option>
								<option value="2">5年以内</option>
								<option value="1">5年以上</option>
							</select>
						</div>
						<label for="mileage" class="layui-form-label" style="width: 100px;">
							行驶里程
						</label>
						<div class="layui-input-inline">
							<select name="mileage" id="mileage">
								<option value="">选择里程数</option>
								<option value="3">1万公里以内</option>
								<option value="2">5万公里以内</option>
								<option value="1">10万公里以内</option>
								<option value="0">10万公里以上</option>
							</select>
						</div>
					</div>
				</div>
		
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" onclick="doSave2();" class="layui-btn" lay-submit="" lay-filter="demo2">快速估价</button>
						<button type="reset" onclick="clear2();" class="layui-btn layui-btn-primary">重置</button>
					</div>
		
				</div>
			</form>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label" style="color: orange;font-size: 20px;width: 140px;">
						推荐报价：
					</label>
					<div class="layui-input-inline" style="color: orange;font-size: 25px;width: 70px;">
						<p type="text" id="calPrice" name="calPrice" class="layui-input" style="color: orange;font-size: 25px;width: 80px;">
					</div>
					<label class="layui-form-label" style="color: orange;font-size: 20px;">
						万元
					</label>
					<label class="layui-form-label" style="width: 230px;">
						<p type="text" id="msg" style="color: red;">
					</label>
				</div>
			</div>
		</div>
		<br />
		<div class="line">&emsp;填写车辆信息 助您快速出手！</div>
		<br />
		<hr />
		<div class="x-body">
			<div style="text-align: center;">
			<form class="layui-form" id="addForm">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">品牌:</label>
						<div class="layui-input-inline">
							<select name="brand" id="brand">
								<option value="">选择汽车品牌</option>
								<option>大众</option>
								<option>奔驰</option>
								<option>宝马</option>
								<option>别克</option>
								<option>红旗</option>
								<option>五菱</option>
								<option>特斯拉</option>
							</select>
						</div>
						<label class="layui-form-label">汽车类型:</label>
						<div class="layui-input-inline">
							<select name="type" id="type">
								<option value="">选择汽车类型</option>
								<option>轿车</option>
								<option>跑车</option>
								<option>商务车</option>
								<option>越野车</option>
								<option>电动车</option>
							</select>
						</div>
						<label class="layui-form-label">汽车颜色:</label>
						<div class="layui-input-inline">
							<select name="color" id="color">
								<option value="">选择汽车颜色</option>
								<option>红色</option>
								<option>白色</option>
								<option>黑色</option>
								<option>蓝色</option>
								<option>棕色</option>
								<option>其他</option>
							</select>
						</div>

					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
					<label for="1" class="layui-form-label">
						<span class="x-red">*</span>型号
					</label>
					<div class="layui-input-inline">
						<input type="text" id="model" name="model" autocomplete="off" class="layui-input">
					</div>
					<label for="seatNum" class="layui-form-label">座位数
					</label>
					<div class="layui-input-inline">
						<select name="seatNum" id="seatNum">
							<option value="4">4</option>
							<option value="2">2</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="8">8</option>
							<option value="12">12</option>
						</select>
					</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
					<label for="usedTime" class="layui-form-label">
						车龄（年）
					</label>
					<div class="layui-input-inline">
						<input type="text" id="usedTime" name="usedTime" autocomplete="off" class="layui-input">
					</div>
					<label for="milage" class="layui-form-label">
						行驶里程（万里）
					</label>
					<div class="layui-input-inline">
						<input type="text" id="mileage" name="mileage" autocomplete="off" class="layui-input">
					</div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-inline">
					<label for="note" class="layui-form-label">
						<span class="x-red">*</span>备注(卖家手机号码)
					</label>
					<div class="layui-input-inline">
						<input type="text" id="note" name="note" autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label" style="color: #ff0000;font-size: 16px;">
						<span class="x-red">*</span>标价:
					</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="price" name="price" placeholder="￥" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">万</div>
					</div>
	
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
					<label class="layui-form-label">上传封面照片</label>
					<div class="layui-input-inline uploadHeadImage">
						<div class="layui-upload-drag" id="headImg">
							<i class="layui-icon"></i>
							<p>点击上传图片，或将图片拖拽到此处</p>
						</div>
					</div>
					预览图：
					<div class="layui-upload-list" id="demo2"></div>

					<input type="text" id="picture" name="picture" style="display: none;" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
					<label class="layui-form-label">上传车况图</label>
					<div class="layui-input-inline uploadHeadImage">
						<div class="layui-upload-drag" id="Img">
							<i class="layui-icon"></i>
							<p>点击上传图片，或将图片拖拽到此处</p>
						</div>
					</div>
					预览图：
					<div class="layui-upload-list" id="demo3"></div>
					<input type="text" id="picture1Path" name="picture1Path" style="display: none;" class="layui-input">
					</div>
					
					
					<div class="layui-inline">
					<label class="layui-form-label">上传车况图2</label>
					<div class="layui-input-inline uploadHeadImage">
						<div class="layui-upload-drag" id="Img2">
							<i class="layui-icon"></i>
							<p>点击上传图片，或将图片拖拽到此处</p>
						</div>
					</div>
					预览图：
					<div class="layui-upload-list" id="demo4"></div>
					<input type="text" id="picture2Path" name="picture2Path" style="display: none;" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" onclick="doSave();" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						<div id="rigisterHint" style="color:red"></div>
					</div>

				</div>

			</form>
			</div>
		</div>
		<script>
			function clear2(){
				
				$("#calPrice").html("");
				$("#msg").html("");
			}
			//提交估价表单
			function doSave2() {
			
				var data = $("#calForm").serialize();
				$.get("http://localhost:8888/usedcar/car/calPrice?token=" + document.cookie.split(";")[0], data, function(response) {
					console.log(response);
					if (response.status == 200) {
						$("#calPrice").html(response.data);
					} else if (response.status == 400) {
						$("#msg").html("<b>请填写车辆品牌和类型！</b>");
					}
				});
			}
			//提交卖车表单
			function doSave() {
				
				var data = $("#addForm").serialize();
				$.post("http://localhost:8888/usedcar/car/add?sale=1&saleType=0&token="+document.cookie.split(";")[0], data, function(response) {
					console.log(response);
					if (response.status == 200) {
						layer.alert("添加成功", {
							yes: function() {
								window.location.reload();
							}
						});
					} else if (response.status == 400) {
						//车辆标价未输入
						$("#rigisterHint").html("<b>车辆标价未输入</b>");
					} 
				});
			}
			
			layui.use(['form', 'layer', 'upload'], function() {
				$ = layui.jquery;
				var form = layui.form,
					layer = layui.layer,
					upload = layui.upload,
					element = layui.element;
				var s = "";
				//拖拽上传
				var uploadInst = upload.render({
					elem: '#headImg',
					url: 'http://localhost:8888/usedcar/car/uploadImg?token='+document.cookie.split(";")[0],
					size: 1000,
					multiple: true,
					number: 7,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							// $('#demo1').attr('src', result); //图片链接（base64）
							$('#demo2').append('<img src="' + result +
								'" alt="' + file.name +
								'"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')
			
			
						});
					},
					done: function(res) {
						var fileupload = $("#picture");
						fileupload.attr("value", res.data.src);
						console.log(fileupload.attr("value"));
						
						if (s == "") {
							s = JSON.stringify(res);
						} else {
							s = s + "," + JSON.stringify(res);
						};
						localStorage.setItem("address1", s);
					},
					error: function() {
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
			
				});
				//拖拽上传
				var uploadInst = upload.render({
					elem: '#Img',
					url: "http://localhost:8888/usedcar/car/uploadImg?token="+document.cookie.split(";")[0],
					size: 1000,
					multiple: true,
					number: 7,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							// $('#demo1').attr('src', result); //图片链接（base64）
							$('#demo3').append('<img src="' + result +
								'" alt="' + file.name +
								'"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')
			
			
						});
					},
					done: function(res) {
						var fileupload2 = $("#picture1Path");
						fileupload2.attr("value", res.data.src);
						console.log(fileupload2.attr("value"));
						if (s == "") {
							s = JSON.stringify(res);
						} else {
							s = s + "," + JSON.stringify(res);
						};
						localStorage.setItem("address1", s);
					},
					error: function() {
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
			
				});
				//拖拽上传
				var uploadInst = upload.render({
					elem: '#Img2',
					url: "http://localhost:8888/usedcar/car/uploadImg?token="+document.cookie.split(";")[0],
					size: 1000,
					multiple: true,
					number: 7,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo4').append('<img src="' + result +
								'" alt="' + file.name +
								'"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')
							
							
						});
					},
					done: function(res) {
						var fileupload2 = $("#picture2Path");
						fileupload2.attr("value", res.data.src);
						console.log(fileupload2.attr("value"));
						if (s == "") {
							s = JSON.stringify(res);
						} else {
							s = s + "," + JSON.stringify(res);
						};
						localStorage.setItem("address1", s);
					},
					error: function() {
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
							
				});
			
				//自定义验证规则
				form.verify({
					repass: function(value) {
						if ($('#L_pass').val() != $('#L_repass').val()) {
							return '两次密码不一致';
						}
					}
				});
			
				//监听提交
				form.on('submit(add)', function(data) {
					console.log(data);
					//发异步，把数据提交给php
					layer.alert("增加成功", {
						icon: 6
					}, function() {
						// 获得frame索引
						var index = parent.layer.getFrameIndex(window.name);
						//关闭当前frame
						parent.layer.close(index);
					});
					return false;
				});
			
			
			});
		</script>
		<!-- jquery
		============================================ -->
		<script src="js/vendor/jquery-1.11.3.min.js"></script>

		<!-- bootstrap JS
		============================================ -->
		<script src="js/bootstrap.min.js"></script>

		<!-- nivo slider js
		============================================ -->
		<script src="lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
		<script src="lib/nivo-slider/home.js" type="text/javascript"></script>

		<!-- wow JS
		============================================ -->
		<script src="js/wow.min.js"></script>

		<!-- meanmenu JS
		============================================ -->
		<script src="js/jquery.meanmenu.js"></script>

		<!-- owl.carousel JS
		============================================ -->
		<script src="js/owl.carousel.min.js"></script>

		<!-- price-slider JS
		============================================ -->
		<script src="js/jquery-price-slider.js"></script>

		<!-- scrollUp JS
		============================================ -->
		<script src="js/jquery.scrollUp.min.js"></script>

		<!--Countdown js-->
		<script src="js/jquery.countdown.min.js"></script>

		<!-- Sticky Menu JS
		============================================ -->
		<script src="js/jquery.sticky.js"></script>

		<!-- Elevatezoom JS
		============================================ -->
		<script src="js/jquery.elevateZoom-3.0.8.min.js"></script>

		<!-- plugins JS
		============================================ -->
		<script src="js/plugins.js"></script>

		<!-- main JS
		============================================ -->
		<script src="js/main.js"></script>
	</body>
</html>
